<template>
    <div class="register">
      <div class="register-info">
        <dir class="info-box">
          <div class="name info-text">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
          <div class="name-input info-input"><input type="text" v-model="userName" placeholder="请填写您的真实姓名"></div>
        </dir>
        <dir class="info-box">
          <div class="weixin info-text">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信</div>
          <div class="weixin-input info-input"><input type="text" v-model="weixin" placeholder="请填写您的微信"></div>
        </dir>
        <dir class="info-box">
          <div class="phone info-text">手机号码</div>
          <div class="phone-input info-input"><input type="text" v-model="phone" placeholder="请输入手机号码"></div>
        </dir>
      </div>
      <div class="register-cost">
        <div class="cost info-text">报名费用</div>
        <div class="cost-num info-input">￥{{cost}}</div>
      </div>
      <div class="register-btn" @click="registerPay">立即报名</div>
    </div>
</template>

<script>
import { checkName, checkPhone } from '../../utils/checkInput.js'
import { postBuildOrder,postWeChatPayment } from '../../api/index.js'

export default {
  data(){
    return {
      userName: '',
      weixin: '',
      phone: '',
      activityId: '', // 活动id
      cost: '', // 活动费用
      order_num: '',//后端返回的订单编号
      userToken: '',//用户令牌
    }
  },
  onLoad(option){
    this.init();
    this.activityId = option.activity_id;
    this.cost = option.cost;
  },
  methods:{
    //进入页面初始化表单数据
    init(){
      this.userToken = wx.getStorageSync('userToken');
      this.userName = '',
      this.weixin = '',
      this.phone = ''
    },
    //点击报名按钮支付
    registerPay(){
      if(!checkName(this.userName)){
        wx.showModal({
          title: '提示',
          content: '请输入2-4个字符的名字',
          showCancel: false,
        })
        return
      }
      if(!checkPhone(this.phone)){
        wx.showModal({
          title: '提示',
          content: '请输入正确的手机号码',
          showCancel: false,
        })
        return
      }
      this. reqBuildOrder();
    },
    //发送数据创建订单号
    async reqBuildOrder(){
      let parmas = {
        user_token: this.userToken,
        activity_id: this.activityId,
        real_name: this.userName,
        weixin: this.weixin,
        phone: this.phone
      }
      let res = await postBuildOrder(parmas)
      if(res.data.level == 'success'){
        let data = res.data.data;
        this.order_num = data.order_num;
        this.reqWeChatPayment();
      } else {
        wx.showToast({
          title: '创建订单失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //向后端发起支付请求
    async reqWeChatPayment(){
      let parmas = {
        user_token: this.userToken,
        order_num: this.order_num
      }
      let res = await postWeChatPayment(parmas);
      if(res.data.level == 'success'){
        var This = this;
        let data = res.data.data;
        wx.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: 'MD5',
          paySign: data.paySign,
          success(res){
            wx.redirectTo({
              url: '/pages/detail/main?id=' + This.activityId + '&modal=show' 
            })
          },
          fail(res){
            wx.showToast({
              title: "支付失败",
              icon: 'none',
              duration: 1000
            })
          }
        })
      } else {
        wx.showToast({
          title: "支付失败",
          icon: 'none',
          duration: 1000
        })
      }
    }
  }
} 
</script>

<style lang="stylus" scoped>
  .register
    width 100%
    height 100vh
    background-color #f1f1f1
    padding-top 20rpx
    .info-text
      flex 1
      text-align center
    .info-input
      flex 2
    .register-info
      width 100%
      background-color #fff
      .info-box
        height 40rpx
        border 1px solid #f1f1f1 
        display flex
        justify-content center
        align-items center
        font-size 14px
        padding 20rpx
    .register-cost
      height 80rpx
      padding 20rpx
      margin-top 20rpx
      display flex
      justify-content center
      align-items center
      font-size 14px
      background-color #fff
    .register-btn
      position absolute
      bottom 0
      left 0
      width 100%
      height 80rpx
      text-align center
      line-height 80rpx
      background-color #888
      color #fff
      font-size 14px
      &:active
        background-color #777
</style>